<template>
	<div class="package" ref="mobile" id="min-page" @dragover="allowDrop($event)" @drop="drop" @dragover.prevent
		:draggable="false" :data-index="-2">
		<div v-for="(item, index) in pages" :key="index + 1" role="widgetgroup">
			<Covermask v-if="dragActive(index, 'top')"></Covermask>
			<Search v-if="item.name == 'search'" :facade="item.facade" :content="item.content" :index="index"></Search>
			<Title v-if="item.name == 'title'" :facade="item.facade" :content="item.content" :index="index"></Title>
			<navigation v-if="item.name == 'navigation'" :facade="item.facade" :content="item.content" :index="index">
			</navigation>
			<Video v-if="item.name == 'video'" :facade="item.facade" :content="item.content" :index="index"></Video>
			<Banner v-if="item.name == 'banner'" :facade="item.facade" :content="item.content" :index="index"></Banner>
			<Goods v-if="item.name == 'goods'" :facade="item.facade" :content="item.content" :index="index"></Goods>
			<Blank v-if="item.name == 'blank'" :facade="item.facade" :content="item.content" :index="index"></Blank>
			<Separate v-if="item.name == 'separate'" :facade="item.facade" :content="item.content" :index="index">
			</Separate>
			<Tabs v-if="item.name == 'tabs'" :facade="item.facade" :content="item.content" :index="index"></Tabs>
			<Wechat v-if="item.name == 'wechat'" :facade="item.facade" :content="item.content" :index="index"></Wechat>
			<Notice v-if="item.name == 'notice'" :facade="item.facade" :content="item.content" :index="index"></Notice>
			<Rubik v-if="item.name == 'rubik'" :facade="item.facade" :content="item.content" :index="index"></Rubik>
			<Coupon v-if="item.name == 'coupon'" :facade="item.facade" :content="item.content" :index="index"></Coupon>
			<ArichText v-if="item.name == 'arichText'" :facade="item.facade" :content="item.content" :index="index">
			</ArichText>
			<Floating class="fixedAbs" :style="{ left: item.facade.x + '%', top: item.facade.y * 9 + 'px' }"
				v-if="item.name == 'floating'" :facade="item.facade" :content="item.content" :index="index"></Floating>
			<Covermask v-if="dragActive(index, 'down')" />
		</div>
		<div class="package-empty" :data-index="-2">
			<Covermask v-if="dragActive(-2, 'down')" :data-index="-2"></Covermask>
		</div>
	</div>
</template>
<script type="text/javascript">
import modules from "./modules";
import Covermask from "/$/magic/components/covermask.vue";
import { markRaw } from "vue";
import store from "/@/store";

export default {
	components: {
		Title: markRaw(modules.title.widget),
		Video: markRaw(modules.video.widget),
		Separate: markRaw(modules.separate.widget),
		Blank: markRaw(modules.blank.widget),
		Banner: markRaw(modules.banner.widget),
		Search: markRaw(modules.search.widget),
		Goods: markRaw(modules.goods.widget),
		Navigation: markRaw(modules.navigation.widget),
		Rubik: markRaw(modules.rubik.widget),
		Tabs: markRaw(modules.tabs.widget),
		Notice: markRaw(modules.notice.widget),
		Wechat: markRaw(modules.wechat.widget),
		Coupon: markRaw(modules.coupon.widget),
		ArichText: markRaw(modules.arichText.widget),
		Floating: markRaw(modules.floating.widget),
		Covermask: markRaw(Covermask)
	},
	data() {
		return {
			is_empty: false
		};
	},
	watch: {
		coms(value) { },
		pages: {
			deep: true,
			handler(newV, oldV) { }
		}
	},
	/**
	 * 计算属性
	 * @type {Object}
	 */
	computed: {
		dragIndex: {
			get() {
				return this.$store.getters.dragIndex;
			},
			set(value) {
				this.$store.commit("setDragIndex", value);
			}
		},
		position: {
			get() {
				return this.$store.getters.position;
			},
			set(value) {
				this.$store.commit("setDragPosition", value);
			}
		},
		select() {
			return this.$store.getters.index;
		},
		pages: {
			get() {
				return this.$store.getters.pages;
			},
			set(value) {
				this.$store.commit("setPagesData", value);
			}
		},
		coms() {
			return this.$store.getters.coms;
		}
	},
	onLoad({ ctx, app }) {
		console.log("(this.$service==>", this.$service);
	},
	mounted() {
		this.loadPageInfo();
	},
	methods: {
		/**
		 * 加载数据操作
		 * @return {[type]} [description]
		 */
		loadPageInfo() {
			let { id } = this.$route.query;
			store.service.magic.magic
				.info({
					id
				})
				.then((resData) => {
					console.log(resData);
					this.pages = resData.content ? JSON.parse(resData.content) : [];
					this.$store.commit("setPageInfo", resData);
				})
				.catch((err) => {
					this.$message.error(err);
				});
		},
		/**
		 * 拖拽激活
		 * @param  {[type]} index    [description]
		 * @param  {[type]} position [description]
		 * @return {[type]}          [description]
		 */
		dragActive(index, position) {
			if (this.dragIndex === index && this.position == position && this.coms) {
				return true;
			} else {
				return false;
			}
		},
		/**
		 * 拖拽过程事件
		 * @return {[type]} [description]
		 */
		allowDrop($event) {
			let index = parseInt($event.target.dataset.index);
			if (index || index === 0) {
				this.dragIndex = index;
				//判断是否为拖拽元素
				if ($event.type == "dragover" && $event.target.dataset) {
					//判断是否是拖拽区域
					if ($event.target.dataset.type == "widget") {
						//获取Y轴移动值
						let y = parseFloat($event.offsetY);
						//由于缩小50%，需要除去双倍
						let h = parseFloat($event.target.clientHeight / 4);
						if (y < h) {
							this.position = "top";
						} else {
							this.position = "down";
						}
					}
				}
			}
			if (index == -2) {
				this.dragIndex = index;
				this.position = "down";
			}
			$event.preventDefault();
		},
		/**
		 * 执行放置，只要在范围内
		 * @param  {[type]} $event [description]
		 * @return {[type]}        [description]
		 */
		drop($event) {
			this.$store.dispatch("pushPagesComs");
		},
		draggableStart() {
			this.$store.commit("setLock", true);
		},
		draggableEnd() {
			this.$store.commit("setLock", false);
		}
	}
};
</script>
<style lang="less" scoped>
@import "./style.less";
</style>
